<template>
  <view>
    <view :style="[pageStyle]">
      
      <cm-card title="基本信息"
        title-icon="cuIcon-title app-theme-color"
        cm-class="cm-margin-bottom-10">
        <view class="bagua-create-line app-border-color_ex-bottom cm-padding-left-10">
          <cm-input v-model="createData.title" placeholder="请输入标题">
            <view class="cm-flex-s-0" style="width: 50px;">标题</view>
          </cm-input>              
        </view>
        <view class="cm-flex cm-flex-wrap">
          <view class="bagua-create-radio-wrapper" v-for="(item, index) in typeRadio" :key="index"
            @click="clickHandler(item)">
            <view class="bagua-create-radio-extra" :class="[createData.type === item.value ? 'selected' : '']"></view>
            <view class="bagua-create-radio-content">
              <cm-icon size="36" cm-class="app-theme-color" :type="item.icon"></cm-icon>
              <view class="cm-text-12 cm-margin-top-5">{{ item.text }}</view>              
            </view>
          </view>
        </view>
        <!--
        <view class="bagua-create-line">
          <cm-radio :value="createData.type" :radio-data="typeRadio" @change="changeHandler($event, 'type')">
            <view class="cm-flex-s-0" style="width: 50px;">类别</view>
          </cm-radio>
        </view>
        -->
      </cm-card>
      
      <bagua-time-card cm-class="cm-margin-bottom-10" ganzhi-show="4" @change="changeHandler($event, 'date')"></bagua-time-card>
      
      <view v-if="loadedList.indexOf('timeDunjia') >= 0" v-show="createData.type === 'timeDunjia'">
        <cm-card title="时局选项"
          title-icon="cuIcon-title app-theme-color"
          cm-class="cm-margin-bottom-10">
          <view class="cm-padding-left-10 cm-padding-right-10">
            <cm-radio :value="createData.timeDunjiaType" :radio-data="timeTypeRadio" group-type="block"
              @change="changeHandler($event, 'timeDunjiaType')">
              <view class="cm-flex-s-0" style="width: 80px;">定局方式</view>
            </cm-radio>
          </view>
        </cm-card>        
      </view>

      
      <view v-if="loadedList.indexOf('posDunjia') >= 0" v-show="createData.type === 'posDunjia'">
        <cm-card title="山向选项"
          title-icon="cuIcon-title app-theme-color"
          cm-class="cm-margin-bottom-10">
          <view class="cm-padding-left-10 cm-padding-right-10">
            <view class="bagua-create-line app-border-color_ex-bottom">
              <cm-label-text label="山向信息" label-width="80" label-no-padding label-align="left">{{ posText }}</cm-label-text>
            </view>
            <view class="bagua-create-line app-border-color_ex-bottom">
              <cm-input placeholder="请输入角度" @input="angleInputHandler" :value="posAngleInput" input-init>
                <view class="cm-flex-s-0" style="width: 50px;">角度</view>
              </cm-input>            
            </view>
            <cm-radio cm-class="app-border-color_ex-bottom" :value="createData.posDunjiaType" :radio-data="posTypeRadio" group-type="block"
              @change="changeHandler($event, 'posDunjiaType')">
              <view class="cm-flex-s-0" style="width: 80px;">定局方式</view>
            </cm-radio>
          </view>
        </cm-card>        
      </view>
      
      <view v-if="loadedList.indexOf('freeDunjia') >= 0" v-show="createData.type === 'freeDunjia'">
        <cm-card title="自定义选项"
          title-icon="cuIcon-title app-theme-color"
          cm-class="cm-margin-bottom-10">
          <view class="cm-padding-left-10 cm-padding-right-10">
            <cm-radio :value="freeDunjiaValue" :radio-data="freeDunjiaRadio" @change="freeDunjiaChangeHandler">
              <view class="cm-flex-s-0" style="width: 50px;">性别</view>
            </cm-radio>
          </view>
        </cm-card>        
      </view>
      
      <view v-if="loadedList.indexOf('bazi') >= 0" v-show="createData.type === 'bazi'">
        <cm-card title="八字选项"
          title-icon="cuIcon-title app-theme-color"
          cm-class="cm-margin-bottom-10">
          <view class="cm-padding-left-10 cm-padding-right-10">
            <view class="bagua-create-line app-border-color_ex-bottom">
              <cm-input placeholder="请输入姓名" v-model="createData.name">
                <view style="width: 50px;">姓名</view>
              </cm-input>               
            </view>
            <cm-radio :value="createData.sex" :radio-data="sexRadio" @change="changeHandler($event, 'sex')">
              <view class="cm-flex-s-0" style="width: 50px;">性别</view>
            </cm-radio>
          </view>
        </cm-card>
      </view>
      
      <view v-if="loadedList.indexOf('liuren') >= 0" v-show="createData.type === 'liuren'">
        <cm-card title="六壬选项"
          title-icon="cuIcon-title app-theme-color"
          cm-class="cm-margin-bottom-10">
          <view class="cm-padding-left-10 cm-padding-right-10">
            <view class="bagua-create-line app-border-color_ex-bottom" @click="selectLiurenKeyGanzhiHandler">
              <view class="cm-flex cm-flex-a-center cm-flex-j-between">
                <view class="cm-flex cm-flex-a-center">
                  <view style="width: 80px;">测者用神</view>
                  <view>{{ createData.liurenKeyGanzhi }}</view>
                </view>
                <cm-icon type="iconfont icon-arrow-right"></cm-icon>
              </view>             
            </view>
            <view class="bagua-create-line app-border-color_ex-bottom" @click="selectLiurenShengxiaoHandler">
              <view class="cm-flex cm-flex-a-center cm-flex-j-between">
                <view class="cm-flex cm-flex-a-center">
                  <view style="width: 80px;">测者属相(地支)</view>
                  <view>{{ createData.liurenShengxiao }}</view>
                </view>
                <cm-icon type="iconfont icon-arrow-right"></cm-icon>
              </view>             
            </view>
            <cm-radio :value="createData.guiGodType" :radio-data="guiGodRadio" group-type="block"
              @change="changeHandler($event, 'guiGodType')">
              <view class="cm-flex-s-0" style="width: 80px;">贵神阴阳</view>
            </cm-radio>
          </view>
        </cm-card>
        
        
      </view>

      
      <cm-float icon-size="28" position="bottom" :bottom="floatPos.bottom" :items="createFloat"
        @click="createClickHandler"></cm-float>
      
      <!-- 用神选择框 -->
      <cm-picker-ganzhi-popup type="ganzhi" ref="liurenKeyGanzhiPicker"
        @confirm="changeHandler($event, 'liurenKeyGanzhi')"></cm-picker-ganzhi-popup>
      <!-- 宿命选择框 -->
      <cm-picker-ganzhi-popup type="zhi" ref="liurenShengxiaoPicker"
        @confirm="changeHandler($event, 'liurenShengxiao')"></cm-picker-ganzhi-popup>
        
    </view>
  </view>
</template>

<script src="./baguaCreate.js"></script>

<style lang="stylus">
@import './baguaCreate.styl'
</style>
